﻿@model MvcEnrollment.Models.Student

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Create";
}

<style type="text/css">
    #fade {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 1001;
        -moz-opacity: 0.7;
        opacity: .70;
        filter: alpha(opacity=70);
    }

    #light {
        display: none;
        position: absolute;
        top: 40%;
        left: 40%;
        height: 150px;
        margin-left: -150px;
        margin-top: -100px;
        padding: 10px;
        border: 2px solid #FFF;
        background: #CCC;
        z-index: 1002;
        overflow: visible;
    }

    #fade2 {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 1001;
        -moz-opacity: 0.7;
        opacity: .70;
        filter: alpha(opacity=70);
    }

    #light2 {
        display: none;
        position: absolute;
        top: 10%;
        left: 30%;
        width: 1000px;
        margin-left: -150px;
        margin-top: -100px;
        padding: 10px;
        border: 2px solid #FFF;
        background: #CCC;
        z-index: 1002;
        overflow: visible;
    }

    blue {
        color: #333399;
    }
</style>

<script type="text/javascript">
    window.document.onkeydown = function (e) {
        if (!e) {
            e = event;
        }
        if (e.keyCode == 27) {
            lightbox_close();
            lightbox2_close();
        }
    }
    function lightbox_open() {
        window.scrollTo(0, 0);
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
    }
    function lightbox_close() {
        document.getElementById('light').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
    }

    function lightbox2_open() {
        window.scrollTo(0, 0);
        document.getElementById('light2').style.display = 'block';
        document.getElementById('fade2').style.display = 'block';
    }
    function lightbox2_close() {
        document.getElementById('light2').style.display = 'none';
        document.getElementById('fade2').style.display = 'none';
    }
</script>

<section id="congraInfo2">
    <h2>CONGRATULATION FOR MAKING THIS DECISION</h2>
    <h3>Thank You!</h3>
</section>
<br />
<table>
    <tr>
        <th>Course Name</th>
        <th>Payment Option</th>
        <th>Cost</th>
    </tr>
    <tr>
        <td>@ViewData["courseName"]</td>
        <td>@ViewData["PDetails"]</td>
        <td>$@ViewData["totalAmount"]</td>
    </tr>
</table>
<br />
<input type="button" id="btnpopup" value="Change plan" onclick="lightbox_open();" />
<div id="light">
    @{Html.RenderAction("PaymentOptions", "Course", new { id = @Request.Cookies["courseId"].Value });}
</div>
<div id="fade" onclick="lightbox_close();"></div>
<br />
<br />
@Html.ActionLink("View Course Details", "Details", "Course", new { id = @Request.Cookies["courseId"].Value }, null) -> <strong>
    <blue>Check out</blue>
</strong>-> Confirmation
<br />
@Html.ValidationMessage("PaymentError")
<h2>Personal Information:</h2>
<br />
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Student</legend>
        <section id="cardBorder">
            <section id="cardContent">
                <table>
                    <tr>
                        <td id="pLabel">Title:</td>
                        <td>@Html.DropDownList("titleList")
                            @Html.ValidationMessageFor(model => model.Title)</td>
                    </tr>
                    <tr>
                        <td id="pLabel">First Name:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The first name cannot be longger than 50 characters."
                    data-val-length-max="50"
                    data-val-required="The first name is required."
                    id="firstName" name="firstName" type="text" value="@ViewData["firstName"]" />
                            <span class="field-validation-valid" data-valmsg-for="firstName" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Last Name:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The last name cannot be longger than 50 characters."
                    data-val-length-max="50"
                    data-val-required="The last name is required."
                    id="cardName" name="lastName" type="text" value="@ViewData["lastName"]" />
                            <span class="field-validation-valid" data-valmsg-for="lastName" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Birthday:</td>
                        <td>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The date must be 2 numbers."
                    data-val-length-max="2"
                    data-val-length-min="2"
                    data-val-required="The birthday date is required."
                    id="bd" name="bd" type="text" style="width:40px; text-align:center" placeholder="dd" value="@ViewData["bd"]" />
                            <span class="field-validation-valid" data-valmsg-for="bd" data-valmsg-replace="true"></span>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The month must be 2 numbers."
                    data-val-length-max="2"
                    data-val-length-min="2"
                    data-val-required="The birthday month is required."
                    id="bm" name="bm" type="text" style="width:40px; text-align:center" placeholder="MM" value="@ViewData["bm"]" />
                            <span class="field-validation-valid" data-valmsg-for="bm" data-valmsg-replace="true"></span>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The birthday year must be 4 numbers."
                    data-val-length-max="4"
                    data-val-length-min="4"
                    data-val-required="The birthday year is required."
                    id="by" name="by" type="text" style="width:60px; text-align:center" placeholder="yyyy" value="@ViewData["by"]" />
                            <span class="field-validation-valid" data-valmsg-for="by" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Contact Number:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The cantact number cannot be longger than 20 characters."
                    data-val-length-max="20"
                    data-val-required="The contact number is required."
                    id="phone" name="phone" type="text" value="@ViewData["phone"]" />
                            <span class="field-validation-valid" data-valmsg-for="phone" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Email:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The email address cannot be longger than 50 characters."
                    data-val-length-max="50"
                    data-val-required="The eamil address is required."
                    id="email" name="email" type="email" value="@ViewData["email"]" />
                            <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Address:</td>
                        <td>
                            <input data-val="true" data-val-required="The address is required." 
                        id="Addr1" name="Addr1" type="text" placeholder="Address line 1" value="@ViewData["Addr1"]"/>
                            <input id="Addr2" name="Addr2" type="text" placeholder="Address line 2" value="@ViewData["Addr2"]"/>
                            <input id="Suburb" name="Suburb" type="text" placeholder="Suburb" value="@ViewData["Suburb"]"/>
                            <span class="field-validation-valid" data-valmsg-for="Addr1" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">State:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The state cannot be longger than 50 characters."
                    data-val-length-max="50"
                    data-val-required="The eamil address is required."
                    id="state" name="state" type="text" value="@ViewData["state"]" />
                            <span class="field-validation-valid" data-valmsg-for="state" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Country:</td>
                        <td>
                            @{
                            /*@Html.DropDownList("country",
                    new SelectList(ViewBag.countries as System.Collections.IEnumerable,
                        "name", "name"), "-SELECT-", new { @class = "chzn-select", @placeholder = "-SELECT-", @style = "width:160px;" })
                             * */
                            }
                            <input type="text" name="country" value="@ViewData["country"]">
                            @Html.ValidationMessageFor(model => model.Country)
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Postcode:</td>
                        <td>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The post code cannot be longger than 6 characters."
                    data-val-length-max="6"
                    data-val-required="The postcode is required."
                    id="postcode" name="postcode" type="text" value="@ViewData["postcode"]" />
                            <span class="field-validation-valid" data-valmsg-for="postcode" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                </table>
            </section>
        </section>
        <h2>Card details:</h2>
        <section id="cardBorder">
            <section id="cardContent">
                <table>
                    <tr>
                        <td id="pLabel">Name on card:</td>
                        <td>
                            <input data-val="true"
                    data-val-length="The card holder's name cannot be longger than 50 characters."
                    data-val-length-max="50"
                    data-val-required="The card holder's name is required."
                    id="cardName" name="cardName" type="text" value="@ViewData["cardName"]" />
                            <span class="field-validation-valid" data-valmsg-for="cardName" data-valmsg-replace="true"></span>
                        </td>
                        <td id="pLabel">Card number:</td>
                        <td>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The card number must be 16-20 numbers."
                    data-val-length-max="20"
                    data-val-length-min="16"
                    data-val-required="The card number is required."
                    id="cardNum" name="cardNum" type="text" value="@ViewData["cardNum"]" />
                            <span class="field-validation-valid" data-valmsg-for="cardNum" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">Card type:</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="radio" id="cardType" name="cardType" value="Visa"
                                            data-val="true" data-val-required="The card type is required." />
                                        Visa&nbsp;
                                <input type="radio" id="cardType" name="cardType" value="MasterCard"
                                    data-val="true" data-val-required="The card type is required." />
                                        MasterCard
                                <input type="radio" id="cardType" name="cardType" value="JCB"
                                    data-val="true" data-val-required="The card type is required." />
                                        JCB
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="radio" id="cardType" name="cardType" value="AMEX"
                                            data-val="true" data-val-required="The card type is required." />
                                        American Express
                                <input type="radio" id="cardType" name="cardType" value="DCI"
                                    data-val="true" data-val-required="The card type is required." />
                                        Diners Club
                                    </td>
                                </tr>
                            </table>
                            <span class="field-validation-valid" data-valmsg-for="cardType" data-valmsg-replace="true"></span>
                        </td>
                        <td id="pLabel">Expiry date:</td>
                        <td>
                            <select id="exM" name="exM">
                                @for (int i = 1; i <= 12; i++)
                                {
                                    <option value="@i">@i </option>
                                }
                            </select>
                            &nbsp;
                    <select id="exY" name="exY">
                        @for (int i = 2013; i <= 2028; i++)
                        {
                            <option value="@i">@i </option>
                        }
                    </select>
                        </td>
                    </tr>
                    <tr>
                        <td id="pLabel">CVN/Security code:</td>
                        <td>
                            <input data-val="true"
                    data-val-number="The field must be numbers."
                    data-val-length="The CVN must be 3-4 numbers."
                    data-val-length-max="4"
                    data-val-length-min="3"
                    data-val-required="The CVN number is required."
                    id="cvn" name="cvn" type="text" style="width:50px" value="@ViewData["cvn"]" />
                            <span class="field-validation-valid" data-valmsg-for="cvn" data-valmsg-replace="true"></span>
                        </td>
                    </tr>
                </table>
            </section>
        </section>
        @Html.CheckBox("term", new { @class = "required" }) I accept the <a href="#" onclick="lightbox2_open();">Terms & Conditions</a>
        <span class="field-validation-valid" data-valmsg-for="term" data-valmsg-replace="true"></span>
        <div id="light2">
            @{Html.RenderAction("Term", "Student");}
        </div>
        <div id="fade2" onclick="lightbox2_close();"></div>


    </fieldset>
    <p>
        <input type="submit" value="Check out" />
    </p>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
